<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>提交订单</title>
<link rel="icon" href="${project_name}/image/logo.png" >
<link rel="stylesheet" type="text/css" href="${project_name}/css/head.css" />
<link rel="stylesheet" type="text/css" href="${project_name}/css/footer.css" />
<link rel="stylesheet" type="text/css" href="${project_name}/css/go.css" />
	<link rel="stylesheet" type="text/css" href="${project_name}/css/iemt.css"/>
	<script src="${project_name}/js/jquery-1.8.3.js"></script>
    <script src="${project_name}/layer-v2.4/layer/layer.js"></script>
	<script>

		$(() => {

			$("#pre_order").submit(() => {
				return false;
			})

			$("#btn_sure").click(() => {

				let array = $("input[type=checkbox]:not(:first)")
						.filter(":checked")
						.map(function () {
							return $(this).attr("id")
						})
						.toArray()
						.map(i => {
							return parseInt(i)
						})

				$.ajax({
					url: "${project_name}/cart/confirm_order",
					data: {
						arrayJsonString: JSON.stringify(array)
					},
					success:(path) => {
						location = "${project_name}/submitpath.jsp"
					}
				})
			})

			function calculateTotalPricePer(index) {
				console.log("index", index)
				let priceStr = $(".item_form." + index)
						.find(".p_prices2")
						.text();

				let price = parseFloat(priceStr)

				let amountStr = $(".item_form." + index)
								.find("#buy_num")
								.val()
				let amount = parseInt(amountStr)

				$(".item_form." + index)
				.find(".cell.p_sum.p_border_bottom > strong")
				.text(price * amount)

				return price * amount
			}

			//确认订单
			$("#btn_sure").submit((e) => {

				let array = $("input[type=checkbox]:not(:first)")
						.filter(":checked")
						.map(function () {
							return $(this).attr("id")
						})
						.toArray()

				$.ajax({
					url:"${project_name}/cart/confirm_order",
					data:JSON.stringify(array),
					dataType:"json",
					contentType: "application/json;charset=utf-8",
					success: (rst) => {
						console.log(rst)
						location = "${project_name}/submitpath.jsp"
					}

				})

				return false;
			})

			$("input[type=checkbox]:not(:first)").click(() => {
				getSelectedRecordTotalPrice()
			})

			// 购物车商品全选
			$("#selectAll").click((e) => {
				let isChecked = $(e.currentTarget).prop("checked");

				$("input[type=checkbox]:not(:first)").attr("checked", isChecked)
				getSelectedRecordTotalPrice()
			})

			// 计算总价
			function getSelectedRecordTotalPrice() {
				let array = $("input[type=checkbox]:not(:first)")
						.filter(":checked")
						.map(function () {
							return $(this).attr("id")
						})
						.toArray()
						.map(i => {
							return parseInt(i)
						})


				console.log(array)

				let totalPrice = array.map((v) => {
					let tp = calculateTotalPricePer(v)
					console.log("tp",tp)
					return tp
				}).reduce((acc, price) => {
					console.log("acc + price", acc + price)
					return acc + price
				}, 0)

				console.log("totalPrice", totalPrice)

				$("#totalMoney").text(totalPrice)
			}



			//输入框失去焦点
			$(".wrap_input .btn-add").next().next().blur(function () {
				let productId = $(this).next().val()
				console.log(productId)
				$.ajax({
					url:"${project_name}/cart/set",
					async: false,
					data: {
						productId: productId,
						amount: $(this).val()
					},
					success: (rst) => {

						calculateTotalPricePer(productId)
						getSelectedRecordTotalPrice()
					}
				})



			})

			//增加商品数量
			$(".wrap_input .btn-add").click(function(){
				//获得input值
				var y = $(this).next().next().val();
				//转整
				x = parseInt(y)+1;
				$(this).next().next().val(x);
                let productId = $(this).next().next().next().val();

				$.ajax({
					url: "${project_name}/cart/increase",
					data: {
						productId:productId,
						amount:1
					},
					async: false,
					success: (rst) => {
						layer.msg(rst
								? "增加成功" : "添加失败")

						calculateTotalPricePer(productId)
						getSelectedRecordTotalPrice()
					}
				}


			);

                console.log(productId)

			});
			//减少商品数量
			$(".wrap_input .btn-reduce").click(function(){
				//获得input值
				var y = $(this).next().val();
				//转整
				x = parseInt(y)-1;
				if(x>=0){
					$(this).next().val(x);
				}
				let amount = $(this).next().val()
				let productId = $(this).next().next().val();
				$.ajax({
					url: "${project_name}/cart/reduce",
					data: {
						productId:productId,
						amount:1
					},
					async: false,
					success: (rst) => {
						layer.msg(rst
								? "增加成功" : "添加失败")

						calculateTotalPricePer(productId)
						getSelectedRecordTotalPrice()
						if (amount == 0) {
							location = "${project_name}/cart/display"
						}
					}
				})
			});


		})

	</script>
</head>
<body>
	<div class="header">
		<jsp:include page="public_top.jsp"></jsp:include>
		<!--图片-->
		<div class="full_sc order_bottom">
			<div class="w1200 header_conter ">
				<div class="h_c_logo">
					<a href="${project_name}/index.jsp"> <img src="${project_name}/image/logo1.png" /> </a>
				</div>
				<div class="h_c_right">
					<div class="order_Status"></div>
				</div>
			</div>
		</div>
		<!--end-->
	</div>

    <c:choose>
        <c:when test="${cart_product_amount == 0}">
            <!--这里当购物车没有任何商品时显示-->
            <div class="public_b">
                <div class="w1200">
                    <div class="car_no_goods">
                        <img src="${project_name}/image/car_no_goods.jpg" />
                        <div class="no_goods">
                            <p class="no_goods_t">亲，您的购物车空空如也，快去抢购心仪商品吧~</p>
                            <p>
                                <a href="/" class="no_goods_buy">立即购买</a>
                            </p>
                        </div>
                    </div>
                    <!--为你推荐-->
                    <div class="guesslike_div">
                        <div class="remat">
                            <div class="d_h2">
                                <ul>
                                    <li class="on">猜你喜欢</li>
                                </ul>
                            </div>
                            <div class="detail_l_con4">
                                <div class="noguess">暂无商品向您推荐</div>
                            </div>
                        </div>
                    </div>
                    <!--为你推荐-->
                </div>
            </div>
        </c:when>

        <c:otherwise>
            <!--当购物车有商品时显示-->
            <div class="w1200">
                <form id="pre_order">
                    <div class="o_o_part o_o_part3">
                        <div class="oder_shop">
                            <!--shoptitle-->
                            <div class="shop_tit">
                                <div class="column" style="margin-left: 50px">
                                    <input id="selectAll" type="checkbox">
                                </div>
                                <div class="cart_checkbox">
                                    <span>商品名称</span>
                                </div>
                                <div class="column t_price">单价(元)</div>
                                <div class="column t_quantity">数量</div>
                                <div class="column t_sum">小计(元)</div>
                            </div>
                            <!--shoplist-->
                            <div  class="item_list">

                                <c:forEach var="t" items="${tuple2List}">

                                    <div class="item_form ${t._2().productId}">
                                        <div class="cell p_checkbox" style="margin-left: 36px">
                                            <input id="${t._1().id}" type="checkbox">
                                        </div>
                                        <div class="cell p_goods">
                                            <div class="goods_item">
                                                <div class="p_imgs">
                                                    <a target="_blank" href=""> <img width="60px" height="60px"
                                                            src="${project_name}/image/${t._1().image}" alt="${t._1().name}">
                                                    </a>
                                                </div>
                                                <div class="item_msg">
                                                    <div class="p_border_bottom">
                                                        <div class="p_name">
                                                            <a target="_blank" href="${project_name}/product/search?id=${t._1().id}">${t._1().name}</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="cell p_standard">
                                            <p class="p_g_standard p_border_bottom"></p>
                                        </div>
                                        <div class="cell p_price p_border_bottom">
                                            <p class="p_prices2">${t._1().price}</p>
                                        </div>
                                        <div class="cell p_quantity">
											<div class="model_wrap count_wrap">
												<div class="wrap_input" style="left: 45px">
													<a href="javascript://" data-param="0" class="btn-add" style="left: 50px;">-</a>
													<a href="javascript://" data-param="0" class="btn-reduce" style="top: 15px;left: 50px">+</a>
													<input value="${t._2().amount}" id="buy_num" class="text" style="height: 25px" onkeyup="this.value=this.value.replace(/\D/g, '');">
                                                    <input hidden id="productId" value="${t._1().id}"/>
												</div>
											</div>
                                        </div>
                                        <div class="cell p_sum p_border_bottom">
                                            <strong >${t._1().price * t._2().amount}</strong>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                            <!--结算-->
                            <div class="yhxx_box">
                                <ul class="yhxx_list">
                                    <li>
                                        <div class="yhxx_tit">
                                            商品总额<span class="yhxx_money">￥<span id="totalMoney">0</span> </span>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="btnsure_bg">
                                <div class="sureorder">
                                    <input style="cursor:pointer" type="submit" class="un_btn_sure" id="btn_sure" value="确认订单">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </c:otherwise>
    </c:choose>

	<!--底部公用-->
	<div class="footer no-margin-top">
		<div class="footer_b w1200">
			<img src="${project_name}/image/foot_img1.jpg" />
		</div>
		<div class="footer_help w1200">
			<div class="footer1_l">
				<dl class="helpDl">
					<dt>
						<h5>使用帮助</h5>
					</dt>
					<dd>
						<a href="">税费收取规则 </a>
					</dd>
					<dd>
						<a href="">新手指南 </a>
					</dd>
					<dd>
						<a href="">常见问题 </a>
					</dd>
					<dd>
						<a href="">用户协议 </a>
					</dd>
				</dl>
				<dl class="helpDl">
					<dt>
						<h5>会员服务</h5>
					</dt>
					<dd>
						<a href="">积分政策 </a>
					</dd>
					<dd>
						<a href="">会员权益 </a>
					</dd>
					<dd>
						<a href="">会员等级 </a>
					</dd>
				</dl>
				<dl class="helpDl">
					<dt>
						<h5>支付方式</h5>
					</dt>
					<dd>
						<a href="">积分支付 </a>
					</dd>
					<dd>
						<a href="">货到付款 </a>
					</dd>
					<dd>
						<a href="">在线支付 </a>
					</dd>
					<dd>
						<a href="">优惠券支付 </a>
					</dd>
				</dl>
				<dl class="helpDl">
					<dt>
						<h5>配送方式</h5>
					</dt>
					<dd>
						<a href="">包邮政策 </a>
					</dd>
					<dd>
						<a href="">费用说明 </a>
					</dd>
					<dd>
						<a href="">配送说明 </a>
					</dd>
				</dl>
				<dl class="helpDl">
					<dt>
						<h5>售后服务</h5>
					</dt>
					<dd>
						<a href="">电子发票 </a>
					</dd>
					<dd>
						<a href="">售后咨询 </a>
					</dd>
					<dd>
						<a href="">退货办理 </a>
					</dd>
					<dd>
						<a href="">退货政策 </a>
					</dd>
				</dl>
			</div>
			<div class="footer1_r">
				<ul>
					<li>
						<h2>手机开心买</h2> <img src="${project_name}/image/footer_ewm_01.png" />
						<p>下载移动客户端</p>
					</li>
					<li>
						<h2>开心买微信</h2> <img src="${project_name}/image/footer_ewm_02.png" />
						<p>开心买官方微信</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="footer_nav">
			<div class="w720">
				<ul>
					<li><a href="">关于开心买 </a> <span class="line"></span>
					</li>
					<li><a href="">投资者关系 </a> <span class="line"></span>
					</li>
					<li><a href="">商家入驻 </a> <span class="line"></span>
					</li>
					<li><a href="">联系我们 </a> <span class="line"></span>
					</li>
				</ul>
			</div>
		</div>
		<div class="footer_bottom">
			<div class="w1200">
				<p>
					<span class="font_arial">Copyright© 2006-2016 happigo. All
						Rights Reserved </span> 免费服务热线: 400-705-1111 | 固话也可拨打: 800-705-1111 <span
						class="font_arial">E-Mail: service@happigo.com</span><br>
					湘ICP备12000157号 信息网络传播视听节目许可证号：1810530
				</p>
				<p class="footer_b">
					<a
						href="http://www.itrust.org.cn/home/index/itrust_certifi/wm/2782875193.jsp">
						<img src="${project_name}/image/foot_img3.png"/> </a> <a
						href="https://search.szfw.org/cert/l/CX20150428007576007720">
						<img src="${project_name}/image/foot_img4.png"/> </a>
				</p>
			</div>
		</div>
	</div>
	<!--底部end-->
</body>
</html>
